import React,{Component} from 'react'
import Pages from '../Pages'
import {Link} from 'react-router'
import * as pub from '../../config/public';
import * as fetch from '../../config/fetch';
import {Spin,message} from 'antd'
class RankCard extends Component {
	constructor(args) {
		super();
		this.state = {
			CardList : []
		}
	}
	componentWillMount() {

	}
	render(){
		return(
			<ul className="clearFix">
			{this.props.studentTopList.map((item,index)=>{
				return(
						<li key={index}>
							
							<Link to={"/StudentDetail/" + item.userName}>
								{
									item.headPath !== null?
									<img src={pub.getFile(item.headPath)} onError={(e) => pub.headImageError(e)} alt='封面图片' />
									:
									<img alt='test' src={require('../../style/images/portrait.png')} onError={(e) => pub.headImageError(e)}/>
								}
								
								<p><span>No.{index+1}</span><font>{item.userRealName}</font>{item.branckOffice}</p>
								<p>已通过<span style={{padding:'0 5px'}}>{item.total}</span>门课程</p>
							</Link>
							<p>{item.seilInformation}</p>
						</li>
					)
			})}
			</ul>
			)
	}
}
class StudentRank extends Component {
	constructor(args) {
		super();
		this.state = {
			tab : 1,
			studentTopList:[],
			jumpPage:1,
			totalPage:1,
			loading:false
		}
	}
	changeTab(tab) {
		this.setState({
			tab: tab,
			jumpPage:1,
		},()=>{
			this._render();
		})
	}
	componentWillMount() {
		this._render();
	}
	_render() {
		let topType;
		switch (this.state.tab) {
			case 0:
				topType = 'day';
				break;
			case 1:
				topType = 'week';
				break;
			case 2:
				topType = 'month';
				break;
			default:
				break;
		}
		pub.loading(this,true);
		let pageno = this.state.jumpPage
		fetch.rankStudent(topType,pageno).then((data) => {
			if(data.result === 'RC100'){
				this.setState({
					studentTopList: data.studentTopList,
					totalPage:data.total
				},()=>{
					pub.loading(this,false);
				})
			}else{
				message.error(data.errMsg, 3);
				pub.loading(this, false);
			}
			
		}, (res) => {
			pub.loading(this, false);
			pub.reject(res);
		})
	}
	jump(page){
		this.setState({
			jumpPage: page
		}, () => {
			this._render();
		})
	}
	render(){
		return(
		<div className="wrapper bg-F0F4F6">
			<div className="layout clearFix pad-t-20">
				<div className="filter clearFix">
				    <div className="title">学霸榜Top100</div>
					<ul className="filter-ul nav">
					    <li className={this.state.tab===0?"active":""} onClick={()=>this.changeTab(0)}><a>日榜</a></li>
						<li className={this.state.tab===1?"active":""} onClick={()=>this.changeTab(1)}><a>周榜</a></li>
						<li className={this.state.tab===2?"active":""} onClick={()=>this.changeTab(2)}><a>月榜</a></li>
					</ul>
				</div>
				<Spin spinning={this.state.loading} tip="加载列表中...">
				<div className="rank-box" style={{minHeight:'559px'}}>
				   <RankCard studentTopList={this.state.studentTopList}/>
				</div>
				</Spin>
				<div className="line"></div>
				<Pages totalPage={this.state.totalPage} changePage={this.state.jumpPage} jump={this.jump.bind(this)}/>
			</div>
	    </div>
			)
	}
}
export default StudentRank;